import request from '../../Utils/request';
Page({
	/**
	 * 页面的初始数据
	 */
	data: {
		videoGroupList: [], // 导航标签数据
		navId: '', // 导航标识
		videoList: [], //视频数据
		videoId: '', // 视频 id 标识
		videoUpdateTime: [], // video 播放时长
		isTrigger: false, // 标识下拉刷新是否被触发
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		// 判断用户是否登录
		let userInfo = wx.getStorageSync('userInfo');
		if (!userInfo) {
			wx.showToast({
				title: '请先登录',
				icon: 'none',
				success: function () {
					// 跳转到登录页面
					wx.reLaunch({
						url: '/pages/login/login',
					});
				},
			});
		}
		// 获取导航数据
		this.getVideGroupListData();
		/* // 获取视频列表数据
		this.getVideoList(this.data.navId); */
	},

	// 获取导航数据
	async getVideGroupListData() {
		let videGroupListData = await request('/video/group/list');
		this.setData({
			videoGroupList: videGroupListData.data.slice(0, 14),
			navId: videGroupListData.data[0].id,
		});
		// 获取视频列表数据  异步的原因 onload 只执行一次 放在这里
		this.getVideoList(this.data.navId);
	},
	// 获取视频列表数据
	async getVideoList(navId) {
		// 需要登录 否则会报错
		let videoListData = await request('/video/group', { id: navId });
		// 关闭正在加载
		wx.hideLoading();

		let index = 0;
		let videoList = videoListData.datas.map(item => {
			item.id = index++;
			return item;
		});

		this.setData({
			videoList,
			// 关闭下拉刷新
			isTrigger: false,
		});
	},

	// 点击切换导航的回调
	changeNav(event) {
		let navId = event.currentTarget.id;
		this.setData({
			navId: navId >>> 0, //右移0位
			// navId: navId * 1,
			// 清空原数据  提升用户体验（切换时不显示原来页面的视频数据）
			videoList: [],
		});
		// 显示正在加载
		wx.showLoading({
			title: '正在加载',
		});
		// 获取当前导航对应的视频数据
		this.getVideoList(this.data.navId);
	},

	// 点击播放/继续播放的回调

	handlePlay(event) {
		/**
		 * 问题：多个视频同时播放的问题
		 * 下面的this 是将 实例添加到 this上
		 * 思路：
		 *  1. 在点击播放的事件中需要找到上一个播放的视频
		 *  2. 在播放新的视频之前关闭上一个正在播放的视频
		 * 关键：
		 *  1. 如何找到上一个视频的实例对象
		 *  2. 如何确认点击播放的数据和正在播放的数据不是同一个
		 * 单例模式：
		 *  1. 需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象
		 *  2. 节省内存空间
		 */
		let vid = event.currentTarget.id;
		// 关闭上一个播放的视频
		// 利用图片代替视频的方法可以直接解决多个视频的问题 直接添加 autoplay属性即可
		// this.vid !== vid && this.videoContext && this.videoContext.stop();
		// this.vid = vid;
		// 更新 data,videoID数据
		this.setData({
			videoId: vid,
		});
		// 创建控制 video 标签的实例对象
		this.videoContext = wx.createVideoContext(vid);
		// this.videoContext.play();
		// this.videoContext.stop();
		// 判断当前视频是否有播放记录,如果有，跳转至指定的播放位置
		let { videoUpdateTime } = this.data;
		let videoItem = videoUpdateTime.find(item => item.vid === vid);
		if (videoItem) {
			this.videoContext.seek(videoItem.currentTime);
		}
	},

	// 监听视频播放进度
	handleTimeUpdate(event) {
		let videoTimeObj = {
			vid: event.currentTarget.id,
			currentTime: event.detail.currentTime,
		};
		let { videoUpdateTime } = this.data;
		/**
		 * 思路：判断记录播放时长的数组中是否属于当前视频的播放记录
		 *  1. 如果有，在原有的播放记录中修改播放时间为当前播放时间
		 *  2. 如果没有，需要在数组中添加当前视频的播放对象
		 * */
		let videoItem = videoUpdateTime.find(item => item.vid === videoTimeObj.vid);
		if (videoItem) {
			//之前有
			videoItem.currentTime = videoTimeObj.currentTime;
		} else {
			videoUpdateTime.push(videoTimeObj);
		}
		this.setData({
			videoUpdateTime,
		});
	},

	// 视频播放结束调用
	handleEnded(event) {
		// 移除播放时长数组中当前视频的对象
		let { videoUpdateTime } = this.data;

		videoUpdateTime.splice(
			videoUpdateTime.findIndex(item => item.vid === event.currentTarget.id),
			1
		);
		this.setData({
			videoUpdateTime,
		});
	},

	// 自定义下拉刷新视频数据: scroll-view
	handleRefresher() {
		// 再次发请求，获取最新的视频列表数据
		this.getVideoList(this.data.navId);
	},

	// 自定义触底加载: scroll-view
	handleTolower() {
		// 数据分页：1. 后端分页，2.后端分页
		console.log('发送请求 || 在前端截取最新的数据加载到页面中');
		console.log('网易云音乐暂时没有提供分页的API');
	},

	// 跳转至搜索页面
	toSearch() {
		wx.navigateTo({
			url: '/pages/search/search',
		});
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () {},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () {},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () {},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () {
		console.log('页面下拉刷新');
	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {
		console.log('页面上拉触底');
	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function ({ from }) {
		if (from === 'button') {
			return {
				title: '来自 button 的转发',
				path: '/pages/video/video',
				imageUrl: '/static/images/nvsheng.jpg',
			};
		} else {
			return {
				title: '来自 menu 的转发',
				path: '/pages/video/video',
				imageUrl: '/static/images/nvsheng.jpg',
			};
		}
	},
});
